<template>
    <div class="micro-server-page">
        <a-spin v-show="loading" :spinning="loading" class="spin-wrapper" size="large" />
        <!--
            name(必传)：应用名称
            url(必传)：应用地址，如http://localhost:3000/ 会被自动补全为http://localhost:3000/index.html
            baseRoute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/allin-app`
           -->
        <micro-app
            :name="childName"
            :url="url"
            :baseroute="baseRoute"
            :data="containerData"
            class="micro-app-wrapper"
            @mounted="microMounted"
            @unmount="microUnmount"
            @error="microError"
            @datachange="handleDataChange"
        />
    </div>
</template>

<script lang="ts" setup>
    import { ref, watch } from 'vue'
    import { useRoute } from 'vue-router'
    import { LAYOUT_PLAN_KEY, MICRO_BASE_ROUTE } from '@/constant'
    import customTheme from '@/design/custom-theme.json';
    import { localGet, localGetApplicationId } from '@/utils/common';

    const baseRoute = ref('')
    const childName = ref('')
    const url = ref('')
    const loading = ref(true)
    const route = useRoute()
    const containerData = ref({
        type: 'asa',
        baseroute: '',
        userInfo: { userItem: localGetApplicationId("al__USER_INFO") || localGet('al__USER_INFO') }, // 这是将基座的登录信息传给Vite子应用进行免登陆
        loginInfo: localGetApplicationId("app-user-store") || localGet('app-user-store'),
        isPublish: true,
		    asaAppId: import.meta.env.VITE_APP_ID.toString().replace(/app_/g, ''),
        url: url.value,
        customTheme: customTheme, // 自定义的主题less变量
    })

    watch(
        () => route,
        newValue => {
            let { origin, pathname } = location
            if (pathname.indexOf(LAYOUT_PLAN_KEY) > -1) {
                pathname = pathname.split(LAYOUT_PLAN_KEY)[0]
            }
            if(pathname.indexOf('/allin-app/') > -1) {
                const [appBaseRoute, childPackageName] = pathname.split('/allin-app/')
                baseRoute.value = `${appBaseRoute}/${MICRO_BASE_ROUTE}`
                childName.value = childPackageName.split('/')[0] + String(newValue.name)
                url.value = `${origin}/${childPackageName.split('/')[0]}`
                containerData.value.baseroute = baseRoute.value
                containerData.value.url = url.value
            }
            
        },
        {
            immediate: true,
            deep: true
        }
    )

    // 子应用渲染完
    const microMounted = () => {
        loading.value = false
    }
    // 子应用卸载
    const microUnmount = () => {
        loading.value = true
    }
    // 子应用渲染出错
    const microError = () => {
        loading.value = false
    }
    // 监听子应用发送来的数据
    const handleDataChange = data => {}
</script>

<style lang="less" scoped>
    .micro-server-page {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .spin-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .micro-app-wrapper,
        .micro-app-wrapper > div {
            height: 100%;
            // 可视化大屏的要屏蔽自定义样式
            .data-visualization-wrapper {
                .view-bg,
                .application-list-header {
                    display: none;
                }
                .@{ant-prefix}-menu-submenu,
                .@{ant-prefix}-menu-item {
                    margin: 4px 0 !important;
                    vertical-align: middle;
                    .al-icon {
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                    }
                }
                .@{ant-prefix}-layout-sider-dark {
                    display: none;
                }
                .menu-title {
                    display: flex;
                    align-items: center;
                }
                .al-data-governance-body {
                    .main {
                        padding-left: 0 !important;
                        .@{ant-prefix}-breadcrumb {
                            display: none;
                        }
                    }
                }
            }
        }
    }
</style>
